<template>
    <div class="collect-page">
        <div class="body">
            <Navigator :leftButton="'none'">
                <template v-slot:center>
                    <div class="title">发现</div>
                </template>
                <template v-slot:right>
                    <div class="btn-search icon" @click="toSearchPage">
                        <img
                            src="https://7769-winfyho-cloud-0gfbcdsg0e062644-1301825810.tcb.qcloud.la/cloudbase-cms/upload/2021-05-30/dg4ud0abrqxkyfwphq0sf8wpkavmd4aj_.png"
                        />
                    </div>
                </template>
            </Navigator>

            <RecommendList :list="articles" />

            <VideoList :videos="videos" />
        </div>
    </div>
</template>

<script>
/* eslint-disable vue/component-definition-name-casing */
import RecommendList from "./components/recommend-list/index";
import VideoList from "./components/video-list/index";

import axios from "axios";
import config from "@/config/index";

export default {
    name: "Discover",
    components: {
        RecommendList,
        VideoList
    },
    data() {
        return {
            videos: [],
            articles: []
        };
    },

    created() {
        this.getVideoList();
        this.getArticleList();
    },

    methods: {
        toSearchPage() {
            this.$router.push({
                path: "/base/ad"
            });
        },

        getVideoList() {
            const baseURL = config.cmsApi;

            axios.get(`${baseURL}/video`).then(res => {
                const videos = res.data.data;
                console.log("视频", videos);
                this.videos = videos;
            });
        },

        getArticleList() {
            const baseURL = config.cmsApi;
            axios.get(`${baseURL}/article`).then(res => {
                const articles = res.data.data;
                this.articles = articles;
                console.log("文章列表", articles);
            });
        }
    }
};
</script>


<style lang="less" scoped>
.collect-page {
    padding-top: 100px;
    padding-bottom: 100px;
    .body {
        width: 100%;
        .btn-search {
            width: 50px;
            height: 50px;
        }
    }
}
</style>